{extend name="./app/admin/view/main.html" /}

{block name="title"}友情链接 - {__block__}{/block}

{block name="style"}
{__block__}

<style type="text/css">
         
    .sortable-chosen {
        background-color: #d9effd;
    }
    .sortable-ghost {
        background-color: #eef2f6;
    }
</style>

{/block}
{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left">
        <h4>友情链接</h4>
    </div>
   <button type="button" class="pull-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='dialogLinkAdd'>
        <span><Icon type="plus-round"></Icon> 添加</span>
    </button>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="mip-box">
        <div class="mip-box-body">
                <section class="diy-table-list" v-if='itemList.length > 0'>
                    <div class="diy-table-item diy-table-item-header">
                        <div class="list-unstyled row">
                            <div class="col-md-2">顺序</div>
                            <div class="col-md-2">链接类型</div>
                            <div class="col-md-3">网站名称</div>
                            <div class="col-md-3">网址</div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                <draggable :list="itemList">
                    <div class="diy-table-item" v-for='(item,index) in itemList' >
                            <div class="list-unstyled row">
                                <div class="col-md-2 text-999">{{index+1}}</div>
                                <div class="col-md-2 text-999"><span v-if='item.type == "all"'>整站</span><span v-if='item.type == "index"'>首页</span><span v-if='item.type == "notIndex"'>非首页</span></div>
                                <div class="col-md-3">{{item.name}}</div>
                                <div class="col-md-3 text-overflow">{{item.url}} </div>
                                <div class="col-md-2 text-right p-r-md">
                                    <i-button type="error" size="small" @click='linkDel(item)'>删除</i-button>
                                    <i-button type="primary" size="small" @click='dialogLinkEdit(item)'>修改</i-button>
                                </div>
                          </div>
                    </div>
                </draggable>
                </section>
                <div class="no-block" v-else>
                    <Icon type="ios-filing-outline"></Icon>
                    <p>暂无数据</p>
                </div>
                    
            </div>
            
          <div class="mip-box-footer text-center p-b">
              <a class="btn btn-primary" @click='linkSave' v-if="itemList.length > 1">保存排序</a>
          </div>
    </section>
</main>
    
    
    <Modal :title="dialogLinkTitle" v-model="dialogLink" size="small">
            <i-form :model="linkInfo" :rules="linkInfoRules" ref="linkInfo" :label-width="80">
                <Form-Item label="名称" prop="name">
                    <i-input v-model="linkInfo.name" placeholder="例:MIPCMS"></i-input>
                </Form-Item>
                <Form-Item label="网址" prop="url">
                    <i-input placeholder="例:http://www.mipcms.com" v-model="linkInfo.url"></i-input>
                </Form-Item>
                <Form-Item label="描述">
                  <i-input v-model="linkInfo.description" placeholder="例:MIPCMS内容管理系统"></i-input>
                </Form-Item>
                <Form-Item label="类型">
                    <i-select v-model="linkInfo.type" placeholder="请选择">
                      <i-option v-for='item in typeList' :label="item.name" :value="item.value"></i-option>
                    </i-select>
                </Form-Item>
            </i-form>
            <div slot="footer" class="dialog-footer">
                <i-button @click="dialogLink = false">取 消</i-button>
                <i-button type="primary" @click="linkAdd('linkInfo')">确 定</i-button>
            </div>
        </Modal>
</div>
{/block}
{block name="javascript"}
{__block__}
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vuedraggable@2.15.0/dist/vuedraggable.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{

            itemList: [],
            linkInfo:{
                name: '',
                name: '',
                url: '',
                type: 'all',
                description: '',
            },
            typeList: [{name:'整站',value: 'all'},{name:'首页',value: 'index'},{name:'非首页',value: 'notIndex'}],
            dialogLinkTitle: '添加友情链接',
            dialogLink: false,
            linkStatus: 'add',
            linkInfoRules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入网址', trigger: 'blur' }
                ],
            },
        },
        mounted: function() {
            _this = this;
            this.getItemList();
        },
        methods:{
            dialogLinkAdd: function() {
                this.dialogLinkTitle = '添加友情链接';
                this.dialogLink = true;
                this.linkInfo.name = '';
                this.linkInfo.url = '';
                this.linkInfo.description = '';
                this.linkInfo.type = 'all';
                this.linkStatus = 'add';
            },
            linkAdd: function(val) {
               this.$refs[val].validate((valid) => {
                    if (valid) {
                        if (this.linkStatus == 'add') {
                            this.$mip.ajax('{$domain}/{$Think.config.admin}/ApiAdminLink/friendlinkAdd',{
                                name: this.linkInfo.name,
                                url: this.linkInfo.url,
                                description: this.linkInfo.description,
                                type: this.linkInfo.type,
                            }).then(function (res) {
                                if (res.code == 1) {
                                    _this.$Message.success(res.msg);
                                    _this.getItemList();
                                    _this.dialogLink = false;
                                }
                            });
                        } else {
                            this.$mip.ajax('{$domain}/{$Think.config.admin}/ApiAdminLink/friendlinkEdit',{
                                id: this.linkInfo.id,
                                name: this.linkInfo.name,
                                url: this.linkInfo.url,
                                description: this.linkInfo.description,
                                type: this.linkInfo.type,
                            }).then(function (res) {
                                if (res.code == 1) {
                                    _this.$Message.success(res.msg);
                                    _this.getItemList();
                                    _this.dialogLink = false;
                                }
                            });
                        }

                    }
                });
            },
            linkDel: function(val) {
               this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        this.$mip.ajax('{$domain}/{$Think.config.admin}/ApiAdminLink/friendlinkDel',{
                            id: val.id,
                        }).then(function (res) {
                            if (res.code == 1) {
                                _this.$Message.success(res.msg);
                                _this.getItemList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            dialogLinkEdit: function(val) {
                this.dialogLinkTitle = '编辑友情链接';
                this.dialogLink = true;
                this.linkInfo.id = val.id;
                this.linkInfo.name = val.name;
                this.linkInfo.url = val.url;
                this.linkInfo.description = val.description;
                this.linkInfo.type = val.type;
                this.linkStatus = 'edit';
            },
            getItemList: function() {
                this.$mip.ajax('{$domain}/{$Think.config.admin}/ApiAdminLink/friendlinkSelect',{
                    order: 'asc',
                }).then(function (res) {
                    if (res.code == 1) {
                        var itemList = res.data.friendlinkList;
                        _this.itemList = itemList;
                    }
                });
            },
            linkSave: function() {
                var itemList = this.itemList;
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].sort = i;
                }
                this.$mip.ajax('{$domain}/{$Think.config.admin}/ApiAdminLink/friendlinkSave',{
                    linkList: itemList,
                }).then(function (res) {
                    if (res.code == 1) {
                        _this.$Message.success(res.msg);
                        _this.getItemList();
                    }
                });
            },
        },

    })
</script>
{/block}